<template>
  <div class="chartNum" :style="{borderBottom: borderColor}">
    <div class="box-item">
      <!--  :style="{border: borderColor}" -->
      <li
        v-for="(item,index) in orderNum"
        :key="index"

        :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
      >
        <span v-if="!isNaN(item)">
          <i ref="numberItem" :style="{color: fontColor}">0123456789</i>
        </span>
        <span v-else class="comma">{{ item }}</span>
      </li>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    dataNumber: {
      type: Number,
      default: 0
    },
    timer: {
      type: Number,
      default: 3000
    },
    fontColor: {
      type: String,
      default: '#fff'
    },
    borderColor: {
      type: String,
      default: '1px solid #fff'
    }

  },
  data() {
    return {
      orderNum: ['0', '0'] // 默认数
    };
  },
  mounted() {
    this.toOrderNum(this.dataNumber); // 这里输入数字即可调用
    this.setNumberTransform();
    var count = 0;
    setInterval(() => {
      count++;
      this.toOrderNum(this.dataNumber + count); // 这里输入数字即可调用
      this.setNumberTransform();
    }, this.timer);
  },
  methods: {
    // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNum.filter(item => !isNaN(item));
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index];
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
      }
    },
    toOrderNum(num) {
      num = num.toString();
      if (num.length < 2) {
        num = '0' + num; // 如未满2位数，添加"0"补位
        this.toOrderNum(num); // 递归添加"0"补位
      } else if (num.length === 2) {
        this.orderNum = num.split(''); // 将其便变成数据，渲染至滚动数组
      }
    }

  }
};

</script>

<style scoped lang='scss'>
  .digit_set {

    background-size: 100% 100%;
    margin-left: 5%;
    width: 10%;
    text-align: center;
    line-height: 70px;
    font-size: 8rem;
    padding: 5% 0;
  }

  .box-item {
    width: 12%;
    text-align: center;
    line-height: 70px;
    font-size: 8rem;
    padding: 2% 0;
    position: relative;
    list-style: none;
    writing-mode: vertical-lr;
    text-orientation: upright;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }

  /* 默认逗号设置 */
  .mark-item {
    width: 10px;
    height: 100px;
    margin-right: 5px;
    line-height: 10px;
    font-size: 20px;
    position: relative;
  }
  .mark-item span {
    position: absolute;
    width: 100%;
    bottom: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  /*滚动数字设置*/
  .number-item {
    margin-left: -20px;
    width: 40px;
    height: 45px;
    /*background: #ccc;*/
    list-style: none;
    margin-right: 0px;
    /*background:rgba(250,250,250,1);*/
    border-radius: 5px;
    // border: 1px solid #2e6099;
    // background-image: url("../images/mmm.png");
    background-size: 100% 100%;

  }

  .number-item:first-child {
    margin-left: 0;
  }

  .number-item span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;

  }

  .number-item span i {
    font-style: normal;
    position: absolute;
    top: -2px;
    left: 25%;
    transform: translate(-50%, 0px);
    transition: transform 2s ease-in-out 0s, -webkit-transform 2s ease-in-out 0s;
    letter-spacing: 10px;
    font-size: 35px;
    font-weight: bolder
}

  .number-item:last-child {
    margin-right: 0;
  }

</style>
